<template>
<div>
 <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="25%"
  :before-close="handleClose">
  <span>确定要退出吗?</span>
  <span slot="footer" class="dialog-footer">
    <el-button style="float:left" @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false,tch()">确 定</el-button>
  </span>
</el-dialog>
  <div :class="{'activeg':this.$route.meta.bj}" id="header" class="my-header">
    <div class="bx">
      <div class="a">
       <router-link to="/">
       <img
          style="cursor: pointer;width: 160px; height: 35px"
          src="../assets/logo.png"
          alt=""
        />
        </router-link>
        <div class="dq">
          <span>{{ dq }}</span>
        </div>
        <ul>
          <li @click="dq = '昆明'">昆明</li>
          <li @click="dq = '上海'">上海</li>
          <li @click="dq = '深圳'">深圳</li>
          <li @click="dq = '杭州'">杭州</li>
          <li @click="dq = '成都'">成都</li>
          <li @click="dq = '重庆'">重庆</li>
          <li @click="dq = '拉萨'">拉萨</li>
          <li @click="dq = '新疆'">新疆</li>
        </ul>
      </div>

      <div class="b">
        <ul>
          <li :class="{'active':this.$route.path=='/'}" @click="$router.push('/')"> 首页</li>
          <li :class="{'active':this.$route.path=='/A'}" @click="$router.push('/A')">租房</li>
          <li :class="{'active':this.$route.path=='/suixiny'}" @click="$router.push('/suixiny')">随心驿</li>
          <li :class="{'active':this.$route.path=='/fuwu'}" @click="$router.push('/fuwu')">服务</li>
          <li :class="{'active':this.$route.path=='/yz'}" @click="$router.push('/yz')">业主</li>
          <li :class="{'active':this.$route.path=='/file'}" @click="$router.push('/file')">生活</li>
          <li :class="{'active':this.$route.path=='/me'}" @click="$router.push('/me')">个人中心</li>
        </ul>
        <span>小程序</span>
        <div class="erweima">
          <div class="trangle"></div>
          <img src="../assets/free-head.png" />
        </div>
        <button @click="$router.push('/yz')">成为房东</button>
      </div>

      <div v-show="!hc" class="c">
        <span @click="lg=true">登录</span>
        <span>|</span>
        <span @click="rg=true">注册</span>
      </div>
      <div v-show="hc" class="d">
        <img src="../assets/666.jpg" alt="">
        <el-dropdown :hide-on-click="false">
  <span id="mz" class="el-dropdown-link">
     {{hc.name}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="$router.push('/me')">个人中心</el-dropdown-item> 
    <el-dropdown-item >
      
      <el-button type="text" @click="dialogVisible = true">退出登录</el-button>


      </el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
      </div>
    </div>
  </div>
  <div v-show="lg" class="login">
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item>
        <h1 style="padding-left:50px">欢迎登录!</h1>
      </el-form-item>
     <el-form-item label="用户名" prop="name">
        <el-input v-model="form.name" placeholder="用户名" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password" placeholder="密码" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" id="dlu" @click="onSubmit">登录</el-button>
        <el-button type="danger" @click="lg=false">取消</el-button>
        <el-button style="width:180px;background:#13dc99;height:40px;margin:0 0 0 30px;padding:10px 20px;border-radius:3px;" type="primary" @click="rg=true,lg=false">注册</el-button>
      </el-form-item>
    </el-form>
    </div>
    <div v-show="rg" class="register">
<el-form ref="form2" :model="form2" :rules="rules2" label-width="100px">
      <el-form-item label="用户名" prop="name">
        <el-input @blur="blur2" v-model="form2.name" placeholder="用户名" />
        <span style="color:red" v-show="ss2">用户名已被注册</span>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form2.password" placeholder="密码" />
      </el-form-item>

      <el-form-item label="确认密码" prop="password2">
        <el-input type="password" v-model="form2.password2" placeholder="确认密码" />
      </el-form-item>

      <el-form-item label="手机号" prop="phone">
        <el-input @blur="blur" v-model="form2.phone" placeholder="手机号" />
        <span style="color:red" v-show="ss">"手机号已被注册"</span>
      </el-form-item>
      <el-form-item>
        <button style="margin-left:-60px;margin-top:10px;float:left" id="inputtt" @click="rg=false" type="reset">取消</button>
        <el-button style="margin-left:10px" :disabled="sss" type="primary" @click="onSubmit2">快速注册</el-button>
      </el-form-item>

    </el-form>
    </div>
  </div>
</template>

<script>
  window.onscroll = function () {
  var t = document.documentElement.scrollTop || document.body.scrollTop;
  if (t >= 500) {
    header.classList.add("active");
  } else {
    header.classList.remove("active");
  }
}
export default {
  data() {
    var validatepassword2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form2.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
       dialogVisible: false,
      hc:'',
      rg:false,
      lg:false,
      sss:true,
      ss:false,
      ss2:false,
      dq: "昆明",
    form: {
        name:"",
        password:'',
      },
      rules:{
        name:[{required:true,message:'姓名不能为空',trigger:'blur'}],
        password:[{required:true,message:'密码不能为空',trigger:'blur'},{pattern:/^\d{6}$/,message:'六位数字',trigger:'blur'}],
      },
      form2: {
        name:"",
        password:null,
        password2:null,
        phone:"",
      },
      rules2:{
        name:[{required:true,message:'姓名不能为空',trigger:'blur'},{pattern:/^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,6}$/,message:'名字过长',trigger:'blur'}],
        password:[{required:true,message:'密码不能为空',trigger:'blur'},{pattern:/^\d{6}$/,message:'六位数字',trigger:'blur'}],
        password2:[{validator:validatepassword2,trigger:'blur'}],
        phone:[{required:true,message:'手机号不能为空',trigger:'blur'},{pattern:/^1[3-9]\d{9}$/,message:'手机号格式不对',trigger:'blur'}],
        
      }
    };
  },

  mounted(){
    this.shuju() 
  },
  methods:{
    shuju(){
      let hc=JSON.parse( localStorage.getItem("data"))//拿浏览器缓存中的数据
      if(hc){//如果浏览器中拿到了数据则表示在登录状态，赋值给属性hc用来页面显示用户信息
      this.hc=hc
      }else{//如果浏览器中没有拿到数据则表示在未登录状态，赋值true给lg属性,显示登录框
        this.lg=true
        this.hc=""//把hc清空，防止页面显示老旧信息
      }
   
    console.log(hc)
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
     open1() {
      this.$message({
          showClose: true,
          message: '恭喜您,登陆成功!',
          type: 'success'
        });
      },
      open2() {
      this.$message({
          showClose: true,
          message: '恭喜您,注册成功!现在可以登录了!',
          type: 'success'
        });
      },
      open3() {
        this.$message({
          showClose: true,
          message: '用户名或密码错误',
          type: 'warning'
        })},
        open4() {
        this.$message({
          showClose: true,
          message: '注册失败...',
          type: 'warning'
        })},
    onSubmit(){//登录
        this.$refs['form'].validate((res)=>{
            if(res){//判断输入内容是否为空
              const params = `name=${this.form.name}&pwd=${this.form.password}`//声明变量用来传参
              this.axios.post(this.$store.state.url+'/xh/user/login',params).then(res=>{//发送请求
              if (res.data.code == 200){//登录成功
              this.$router.push('/')//返回首页
              this.open1()//弹出消息显示登陆成功
              this.lg=false//关闭登录窗口
               this.$store.commit('updateUname', this.form)//将用户数据存到全局
               localStorage.setItem('data',JSON.stringify(res.data)) //将用户数据存到浏览器缓存，防止刷新后数据消失
               let  hc=JSON.parse( localStorage.getItem("data")); //取用浏览器缓存
                this.hc=hc//取用浏览器缓存赋值，用于页面显示用户信息
               console.log(`缓存${res.data}`)
                }else{
                this.open3()//请求失败弹出提示
                }
              })
            }else{
              console.log('验证失败,请检查代码')
            }
        })
    },
    onSubmit2(){//注册
        this.$refs['form2'].validate((res)=>{
            if(res){//判断输入内容是否为空
              const params = `name=${this.form2.name}&pwd=${this.form2.password}&phone=${this.form2.phone}`//声明变量用来传参
              this.axios.post(this.$store.state.url+'/xh/user/register',params).then(res=>{//发送请求
                console.log(res)
                if (res.data.code == 200){//注册成功
              this.$router.push('/')//返回首页
              this.open2()//弹出消息显示注册成功请登录
              this.rg=false//关闭注册窗口
              this.lg=true//打开登录窗口
                }else{
                this.open4()//注册失败
                }
              })
            }else{
              console.log('验证失败,请检查代码')
               return false; 
            }
        })
        
    },
     blur(){//检查手机号是否被注册
        console.log('表单数据:',this.form2)
        this.$refs['form2'].validate((res)=>{
          console.log(res)
            if(res){
              const phone = `phone=${this.form2.phone}`//声明变量用来传参
              this.axios.post(this.$store.state.url+'/xh/user/check_phone',phone).then(res=>{//发送请求
                console.log(res)
                if (res.data.code == 200){
                  this.sss=false//启用注册按钮
                   this.ss=false//关闭手机号已被注册提示
                }else{
                   this.sss=true//关闭注册按钮
                   this.ss=true//打开手机号已被注册提示
                }
              })
            }else{
              console.log('验证失败,请检查表单项')
               return false; 
            }
        })
        
    },
    blur2(){//检查用户名是否被注册
        console.log('表单数据:',this.form2)
        this.$refs['form2'].validate((res)=>{
              const name = `name=${this.form2.name}`//声明变量用来传参
              this.axios.post(this.$store.state.url+'/xh/user/check_name',name).then(res=>{//发送请求
                if (res.data.code == 200){
                   this.ss2=false//数据库未查到信息，返回200，未被注册
                }else{
                    this.ss2=true//用户名已被注册
                }
              })
        })
     
    },
    tch(){//用户推出登录
      this.hc=""//清空hc属性，页面不在显示用户信息
      localStorage.removeItem("data") ; //清空浏览器用户信息缓存
      console.log("退出")
       this.$router.push("/")//返回首页
    },
     resetForm(formName) {
        this.$refs[formName].resetFields();//element UI 函数
      }
    }
  }


</script>

<style lang="scss" scoped>
.my-header {
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.15);
}
#header.active {
  transition: 1s;
  background: rgba(0, 0, 0, 0.8);
}
.bx {
  width: 1252px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.a {
  width: 252px;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  ul {
    width: 50px;
    height: 0px;
    display: block;
    overflow: hidden;
    transition: all 0.3s;
    position: absolute;
    background-color: #fff;
    z-index: 1;
    top: 60px;
    left: 150px;
    list-style-type: none;
    box-shadow: 0 0 10px #b1b1b1;
    li {
      opacity: 0;
      text-align: center;
      height: 20px;
      color: rgb(0, 0, 0);
      padding: 10px 0;
      &::after {
        content: "";
        display: block;
        width: 30px;
        height: 3px;
        margin: auto;
        margin-top: 5px;
        transition: 0.6s;
        border-radius: 3px;
        transform: scaleX(0);
        background-color: #ff6a00;
      }
      &:hover {
        cursor: pointer;
        color: #ff4400;
        &::after {
          transform: scaleX(1);
        }
      }
    }
    
  }
  .dq {
    height: 100%;
    padding-top: 40px;
    span {
      cursor: pointer;
      display: inline-block;
      padding: 3px 5px;
      color: #fff;
      font-size: 13px;
      background-color: rgba($color: #000000, $alpha: 0.2);
      border-radius: 20px;
    }
  }

  .dq:hover + ul,
  ul:hover {
    height: 340px;
    cursor: pointer;
    li {
      opacity: 1;
    }
  }
}

.b {
  width: 760px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 90px 0 200px;
  align-items: center;
  position: relative;

  ul {
    height: 100%;
    list-style-type: none;
    display: flex;
    padding-top: 20px;
    li {
      margin: 0 10px;
      text-shadow: 0 0 1px #484848;
      color: #fff;
      padding: 10px 0;
      position: relative;
      border-bottom: 2px solid rgba($color: #ffffff, $alpha: 0);
      transition: all 0.5s;
      &::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 3px;
        margin: auto;
        margin-top: 10px;
        transition: 0.3s;
        border-radius: 3px;
        transform: scaleX(0);
        background-color: #fb9032;
      }
      &.active::after{
        color: #ff4400;
        transform: scaleX(1);
      }
      &:hover {
        cursor: pointer;
        &::after {
          transform: scaleX(1);
        }
      }
    }
  }
  span {
    cursor: pointer;
    color: #fff;
    display: block;
    padding-top: 40px;
    height: 100%;
    &::after {
      content: "";
      display: block;
      position: absolute;
      z-index: 1;
      width: 50px;
      height: 3px;
      margin: auto;
      margin-top: 10px;
      transition: 0.3s;
      border-radius: 3px;
      transform: scaleX(0);
      background-color: #ff7700;
    }
    &:hover {
      cursor: pointer;
      &::after {
        transform: scaleX(1);
      }
    }
  }
  .erweima {
    transition: all 0.5s;
    transform: scale(0);
    opacity: 0;
    position: absolute;
    top: 60px;
    right: 188px;
    z-index: 1;
  }
  .trangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid rgb(255, 255, 255);
    margin: auto;
  }
  img {
    display: block;
    width: 100px;
    height: 100px;
  }
  span:hover + div {
    transform: scale(1);
    opacity: 1;
  }
  button {
    display: block;
    height: 35px;
    font-size: 15px;
    color: #fff;
    border: 1px solid #fff;
    background: 0;
    padding: 0 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      border-radius: 20px;
      box-shadow: 0 0 15px #ffffff;
    }
  }
}

.c {
  width: 140px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: #fff;
  span {
    padding: 5px;
    transition: 0.8s;
    border-bottom: 2px solid rgba($color: #ffffff, $alpha: 0);
    &:hover {
      cursor: pointer;
      border-bottom: 2px solid rgba($color: #ffffff, $alpha: 1);
    }
  }
}
.d{
  width: 200px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content:left;
  color: #fff;
  span {
    padding: 5px;
    transition: 0.8s;
    border-bottom: 2px solid rgba($color: #ffffff, $alpha: 0);
    &:hover {
      cursor: pointer;
      border-bottom: 2px solid rgba($color: #ffffff, $alpha: 1);
    }
  }
  img{
    width: 40px;
    border:2.5px solid #fb9032;
    border-radius: 50%;
    margin-right: 10px;
    height: 40px;
  }
}




.login{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index:20;
  background-color: rgba($color: #000000, $alpha: 0.5);
}
.register{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index:10;
  background-color: rgba($color: #000000, $alpha: 0.5);
}
#inputtt{
  border: 0;
  padding:10px 10px ;
  border-radius: 2px;
  margin-left: -20px;
  background: rgb(255, 106, 69);
  color: #fff;
   &:hover{
    background: rgb(255, 0, 0);
  }
}
.el-form{
  margin:25vh auto;
  width: 400px;
  background-color: #fff;
  padding:50px 50px 10px 10px;
  border-radius: 10px;
}

.el-button.el-button--primary{
  border: 0;
  width: 300px;
  padding:18px 80px;
  margin-bottom: 30px;
  margin-left: -30px;
  border-radius: 10px;
  &:hover{
    background: rgb(255, 156, 69);
    
  }
}
.el-button.el-button--primary{
  font-size: 20px;
}

.dm{width: 800px;margin:0 auto ;height: 200px;padding-left: 200px;}
.dm span {
  font-size: 50px;
  font-weight: bold;
  float: left;
  display: block;
  margin-top: 30px;
  user-select: none;
}
.dm span:nth-child(1) {
  color: rgb(255, 120, 24);
}
.my-head-b .bx2 .zuo span:nth-child(2) {
  color: rgba($color: #6c6c6c, $alpha: 1);
}
.my-header.activeg{
  background-color:rgba($color: #000000, $alpha: 0.8) ;
}
#dlu{
margin-left: 0px;
}
  .el-dropdown-link {
    cursor: pointer;
    color: #ffffff;
  }
  .el-icon-arrow-down {
    font-size: 14px;
  }
  #mz{
    width: 122px;
    padding: 0;
  }
</style>
